<!doctype html>
<!--[if lt IE 9]><html class="lte-ie8" lang="zh-CN"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="这是里是关键字">
<meta name="description" content=" 网站内容描述">
<meta name="author" content="网站作者">
<link rel="shortcut icon" href="images/favicon.ico">
<title>图文类</title>
<link href="../css/public.css" rel="stylesheet">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/page.css" rel="stylesheet">
<link href="../highlight/styles/github.css" rel="stylesheet">
</head>
<body>
<!--[if  IE 6]> 
<div id="ie6-warning">
	您正在使用IE6或以IE6为内核的浏览器，可能导致本网站无法正常显示，建议您升级到更高版本。<a href="http://www.microsoft.com/china/windows/internet-explorer/"
		target="_blank">点击下载</a><a id="ie6-close href="javascript:void(0)"">关闭</a>
</div>
<script>
	$body=$('body');
	$body.addClass('ie6');
	$('#ie6-close').click(function(){
		$body.removeClass('ie6');
		$('#ie6-warning').hide();
	})
</script>
<![endif]-->
<nav class="topNav"><!--页头--></nav>
<div class="wrapper-box inner">
	<h1 class="article-Title">常见图文类型实例</h1>
	<div class="links">
		&nbsp;
		<a href="#txt">文字类</a>
		<a href="#img">图片类</a>
		<a href="#imgTxt">图文类</a>
	</div>
	<h2 id="txt">文字类</h2>
	<div class="box">
		<h3>面包屑导航：</h3>
		<p class="breadcrumb">您的位置：<a href="javascript:void(0)">首页</a>&gt;<span>交流互动专区</span></p>
		<h4>HTML:</h4>
		<pre><code>&lt;p class=&quot;breadcrumb&quot;&gt;您的位置：&lt;a href=&quot;javascript:void(0)&quot;&gt;首页&lt;/a&gt;&lt;span&gt;交流互动专区&lt;/span&gt;&lt;/p&gt;</code></pre>
	</div>
	<div class="box fn-w400">
		<h3>新闻列表：</h3>
		<ul class="newsList">
			<li><a class="title" href="javascript:void(0)" title="阳泉市突出“广”“精”“严阳泉市突出">阳泉市突出“广”“精”“严 …</a><span class="time">14-03-18</span></li>
			<li><a class="title" href="javascript:void(0)" title="芮城一学生拾金不昧被称“美少芮城一学生拾金不">芮城一学生拾金不昧被称“美少…</a><span class="time">14-03-18</span></li>
			<li><a class="title" href="javascript:void(0)" title="贵都小学:召开期末复习研讨会贵都小学">贵都小学:召开期末复习研讨会</a><span class="time">14-03-18</span></li>
		</ul>
	</div>
	<div class="box fn-w400">
		<h3>新闻列表(带摘要)：</h3>
		<ul class="newsList newsList-abs">
			<li>
				<a class="title" href="javascript:void(0)" title="阳泉市突出“广”“精”“严阳泉市突出">阳泉市突出“广”“精”“严 …</a>
				<p class="abstract">你最喜欢的艺术作品，告诉大家线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图...</p>
			</li>
			<li>
				<a class="title" href="javascript:void(0)" title="芮城一学生拾金不昧被称“美少芮城一学生拾金不">芮城一学生拾金不昧被称“美少…</a>
				<p class="abstract">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</p>	
			</li>
			<li>
				<a class="title" href="javascript:void(0)" title="贵都小学:召开期末复习研讨会贵都小学">贵都小学:召开期末复习研讨会</a>
				<p class="abstract">为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</p>
			</li>
		</ul>
	</div>
	<hr>
	<h2 id="img">图片类</h2>
	<img class="img-rounded" src="../images/default/img_120x120.jpg" alt="带圆角图片">
	<img class="img-circle" src="../images/default/img_120x120.jpg" alt="圆形图片">
	<img class="img-thumbnail" src="../images/default/img_120x120.jpg" alt="缩略图片">
	<hr>
	<h2 id="imgTxt">图文类</h2>
	
	<div class="box">
		<h3>图文上下</h3>
		<ul class="imgTxt-ud">
			<li><a href="javascript:void(0)"><img src="../images/default/img_60x60.jpg" alt="语文版"></a><p class="title"><a href="javascript:void(0)">语文版</a></p></li>
			<li><a href="javascript:void(0)"><img src="../images/default/img_60x60.jpg" alt="语文版"></a><p class="title"><a href="javascript:void(0)">语文版</a></p></li>
			<li><a href="javascript:void(0)"><img src="../images/default/img_60x60.jpg" alt="语文版"></a><p class="title"><a href="javascript:void(0)">语文版</a></p></li>
			<li><a href="javascript:void(0)"><img src="../images/default/img_60x60.jpg" alt="语文版"></a><p class="title"><a href="javascript:void(0)">语文版</a></p></li>
			<li><a href="javascript:void(0)"><img src="../images/default/img_60x60.jpg" alt="语文版"></a><p class="title"><a href="javascript:void(0)">语文版</a></p></li>
		</ul>
	</div>
	<div class="box">
		<h3>图文上下(浮层标题)</h3>
		<ul class="imgTxt-ud-overlay">
			<li><a href="javascript:void(0)"><img src="../images/default/img_160x90.jpg" alt="某天 也许会相遇 相遇在这个好地方"></a><p class="title"><a href="javascript:void(0)">某天 也许会相遇 相遇在这个好地方</a></p></li>
			<li><a href="javascript:void(0)"><img src="../images/default/img_160x90.jpg" alt="不要太担心 只因为我相信"></a><p class="title"><a href="javascript:void(0)">不要太担心 只因为我相信</a></p></li>
			<li><a href="javascript:void(0)"><img src="../images/default/img_160x90.jpg" alt="远方 有一个地方 那里种有我们的梦想"></a><p class="title"><a href="javascript:void(0)">远方 有一个地方 那里种有我们的梦想</a></p></li>
		</ul>
	</div>
	<div class="box">
		<h3>图文左右</h3>
		<ul class="imgTxt-lr fn-clearfix">
			<li>
				<a class="imgArea" href="javascript:void(0)" ><img src="../images/default/img_120x90.jpg" alt="如何做个好父母"></a>
				<div class="txtArea">
					<a class="title" href="javascript:void(0)" title="如何做个好父母">如何做个好父母</a>
					<p class="details">主讲：陆惠萍</p>
				</div>
			</li>
			<li>
				<a class="imgArea" href="javascript:void(0)" ><img src="../images/default/img_120x90.jpg" alt="如何做个好父母"></a>
				<div class="txtArea">
					<a class="title" href="javascript:void(0)" title="如何做个好父母">如何做个好父母</a>
					<p class="details">主讲：陆惠萍</p>
				</div>
			</li>
			<li>
				<a class="imgArea" href="javascript:void(0)" ><img src="../images/default/img_120x90.jpg" alt="如何做个好父母"></a>
				<div class="txtArea">
					<a class="title" href="javascript:void(0)" title="如何做个好父母">如何做个好父母</a>
					<p class="details">主讲：陆惠萍</p>
				</div>
			</li>
		</ul>
	</div>
	<div class="box">
		<h3>留言框</h3>
		<h4>层级嵌套</h4>
		<ul class="msgBox">
			<li>
				<a class="msgObj" href="javascript:void(0)" ><img src="../images/default/img_60x60.jpg" alt="张萌老师"></a>
				<div class="msgArea">
					<div class="msg">
						<p class="msg-text">家长您好！开学以来，孩子表现不错，课堂上认真听讲，请您及时表扬孩子。如果孩子能积极发言那就更好了，你可以引导孩子大声朗读经典文章，提高孩子语言表达能力，鼓励他大胆发言，锻炼孩子在众人面前发表自己言论的胆量，培养他的自信。相信孩子会有更大的进步的！</p>
						<p class="msg-mate">
							<span class="fn-fl">来自<a class="msg-from" href="javascript:void(0)">张萌老师</a></span>
							<span class="fn-fr"><a href="javascript:void(0)">回复(2)</a>&nbsp;|&nbsp;<a href="javascript:void(0)">转发（3）</a></span>
						</p>
						<span class="arrow"></span>
					</div>	
					<ul class="msgBox">
						<li>
							<a class="msgObj" href="javascript:void(0)" ><img src="../images/default/img_60x60.jpg" alt="张萌老师"></a>
							<div class="msgArea">
								<div class="msg">
									<p class="msg-text">家长您好！开学以来，孩子表现不错，课堂上认真听讲，请您及时表扬孩子。如果孩子能积极发言那就更好了，你可以引导孩子大声朗读经典文章，提高孩子语言表达能力，鼓励他大胆发言，锻炼孩子在众人面前发表自己言论的胆量，培养他的自信。相信孩子会有更大的进步的！</p>
									<p class="msg-mate">
										<span class="fn-fl">来自<a class="msg-from" href="javascript:void(0)">张萌老师</a></span>
										<span class="fn-fr"><a href="javascript:void(0)">回复(1)</a>&nbsp;|&nbsp;<a href="javascript:void(0)">转发（3）</a></span>
									</p>
									</p>
									<span class="arrow"></span>
								</div>
								<ul class="msgBox">
									<li>
										<a class="msgObj" href="javascript:void(0)" ><img src="../images/default/img_60x60.jpg" alt="张萌老师"></a>
										<div class="msgArea">
											<div class="msg">
												<p class="msg-text">家长您好！开学以来，孩子表现不错，课堂上认真听讲，请您及时表扬孩子。如果孩子能积极发言那就更好了，你可以引导孩子大声朗读经典文章，提高孩子语言表达能力，鼓励他大胆发言，锻炼孩子在众人面前发表自己言论的胆量，培养他的自信。相信孩子会有更大的进步的！</p>
												<p class="msg-mate">
													<span class="fn-fl">来自<a class="msg-from" href="javascript:void(0)">张萌老师</a></span>
													<span class="fn-fr"><a href="javascript:void(0)">回复(0)</a>&nbsp;|&nbsp;<a href="javascript:void(0)">转发（3）</a></span>
												</p>
												</p>
												<span class="arrow"></span>
											</div>
										</div>		
									</li>
								</ul>
							</div>		
						</li>
						<li>
							<a class="msgObj" href="javascript:void(0)" ><img src="../images/default/img_60x60.jpg" alt="张萌老师"></a>
							<div class="msgArea">
								<div class="msg">
									<p class="msg-text">家长您好！开学以来，孩子表现不错，课堂上认真听讲，请您及时表扬孩子。如果孩子能积极发言那就更好了，你可以引导孩子大声朗读经典文章，提高孩子语言表达能力，鼓励他大胆发言，锻炼孩子在众人面前发表自己言论的胆量，培养他的自信。相信孩子会有更大的进步的！</p>
									<p class="msg-mate">
										<span class="fn-fl">来自<a class="msg-from" href="javascript:void(0)">张萌老师</a></span>
										<span class="fn-fr"><a href="javascript:void(0)">回复(0)</a>&nbsp;|&nbsp;<a href="javascript:void(0)">转发（3）</a></span>
									</p>
									</p>
									<span class="arrow"></span>
								</div>
							</div>		
						</li>
					</ul>
				</div>
			</li>
			<li>
				<a class="msgObj" href="javascript:void(0)" ><img src="../images/default/img_60x60.jpg" alt="张萌老师"></a>
				<div class="msgArea">
					<div class="msg">
						<p class="msg-text">家长您好！开学以来，孩子表现不错，课堂上认真听讲，请您及时表扬孩子。如果孩子能积极发言那就更好了，你可以引导孩子大声朗读经典文章，提高孩子语言表达能力，鼓励他大胆发言，锻炼孩子在众人面前发表自己言论的胆量，培养他的自信。相信孩子会有更大的进步的！</p>
						<p class="msg-mate">
							<span class="fn-fl">来自<a class="msg-from" href="javascript:void(0)">张萌老师</a></span>
							<span class="fn-fr"><a href="javascript:void(0)">回复(0)</a>&nbsp;|&nbsp;<a href="javascript:void(0)">转发（3）</a></span>
						</p>
						<span class="arrow"></span>
					</div>	
				</div>
			</li>
		</ul>
		
		<h4>左右留言框</h4>
		<ul class="msgBox" style="height:300px;">
			<li>
				<a class="msgObj" href="javascript:void(0)" ><img src="../images/default/img_60x60.jpg" alt="张萌老师"></a>
				<div class="msgArea">
					<div class="msg">
						<p class="msg-text">家长您好！开学以来，孩子表现不错，课堂上认真听讲，请您及时表扬孩子。如果孩子能积极发言那就更好了，你可以引导孩子大声朗读经典文章，提高孩子语言表达能力，鼓励他大胆发言，锻炼孩子在众人面前发表自己言论的胆量，培养他的自信。相信孩子会有更大的进步的！</p>
						<p class="msg-mate">
							<span class="fn-fl">来自<a class="msg-from" href="javascript:void(0)">张萌老师</a></span>
							<span class="fn-fr"><a href="javascript:void(0)">回复(0)</a>&nbsp;|&nbsp;<a href="javascript:void(0)">转发（3）</a></span>
						</p>
						</p>
						<span class="arrow"></span>
					</div>
				</div>		
			</li>
			<li class="msgBox-r">
				<a class="msgObj" href="javascript:void(0)" ><img src="../images/default/img_60x60.jpg" alt="张萌老师"></a>
				<div class="msgArea">
					<div class="msg">
						<p class="msg-text">家长您好！开学以来，孩子表现不错，课堂上认真听讲，请您及时表扬孩子。如果孩子能积极发言那就更好了，你可以引导孩子大声朗读经典文章，提高孩子语言表达能力，鼓励他大胆发言，锻炼孩子在众人面前发表自己言论的胆量，培养他的自信。相信孩子会有更大的进步的！</p>
						<p class="msg-mate">
							<span class="fn-fl">来自<a class="msg-from" href="javascript:void(0)">张萌老师</a></span>
							<span class="fn-fr"><a href="javascript:void(0)">回复(0)</a>&nbsp;|&nbsp;<a href="javascript:void(0)">转发（3）</a></span>
						</p>
						</p>
						<span class="arrow"></span>
					</div>
				</div>		
			</li>
		</ul>	
	</div>
	<footer class="footer"><!--页尾--></footer>
</div>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/myscript.js"></script>
<script src="../highlight/highlight.pack.js"></script>
<script>
 hljs.initHighlightingOnLoad('html','css');
</script>
</body>
</html>
